import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import classNames from 'classnames'
import styles from './index.module.scss'
import { pxTransform, shuffle } from "@/utils/utils"
import { getRollBuyRecord } from '@/api/commonApi'
import headImg from "@/assets/icon/user-avatar.png"

//  多少秒执行一次
const TIME = 6
export default class BuyRecord extends Component {
  state: any
  props: any
  timer: any
  seconds: any
  constructor() {
    super(...arguments)
    this.seconds = 0
    this.state = {
      current: 0,
      userList: []
    }
  }

  static options = {
    addGlobalClass: true
  }

  componentDidMount() {
    this.getRecord()
  }

  componentDidShow() {
    this.setTimer()
  }

  componentDidHide() {
    this.clearTimer()
  }

  componentWillUnmount() {
    this.clearTimer()
  }

  //  获取记录
  getRecord() {
    getRollBuyRecord().then(({ data }) => {
      const userList = shuffle(data).map(({ userInfo, ...user }) => ({ ...userInfo, ...user }))
      this.seconds = (userList.length > 0) && this.props.infinite ? 99999 : userList.length * TIME
      this.setState({
        userList
      }, () => {
        this.setTimer()
      })
    })
  }

  /**
   * 开启倒计时
   */
  setTimer() {
    if (!this.timer) this.countdown()
  }

  /**
   * 清除计时器
   */
  clearTimer() {
    if (this.timer) {
      clearTimeout(this.timer as number)
      this.timer = undefined
    }
  }

  /**
   * 倒计时
   */
  countdown() {
    const { current, userList } = this.state
    if (!userList.length) {
      return
    }
    this.seconds--

    if (this.seconds % TIME === 0) {
      const number = current <= userList.length ? current + 1 : 0
      this.setState({
        current: number
      })
    }

    //  时间到
    if (this.seconds < 0) {
      this.clearTimer()
      return
    }

    this.timer = setTimeout(() => {
      this.countdown()
    }, 1000)
  }

  render() {
    const prefixCls = 'buy'
    const { top=0 } = this.props
    const { current, userList } = this.state
    return (
      // @ts-ignore
      <View className={styles[prefixCls]} style={{ top: pxTransform(top) }}>
        <View className={styles[`${prefixCls}-list`]}>
          {
            userList.map((user, key) => {
              return (
                <View key={user.id} className={classNames(styles[`${prefixCls}-item`], {
                  [styles[`${prefixCls}-active`]]: key === current
                })}>
                  <Image src={user.headImg || headImg} className={styles[`${prefixCls}-avatar`]}/>
                  {/*<View className={classNames(styles[`${prefixCls}-text`], 't-o-e')}>兑换了 {user.productName}</View>*/}
                  <View className={classNames(styles[`${prefixCls}-text`], 't-o-e')}>购买了该商品</View>
                </View>
              )
            })
          }
        </View>
      </View>
    )
  }
}
